import React,{useEffect,useState} from 'react';
import { Table, Tag, Space ,Pagination} from 'antd';

import "./App.scss"
import axios from "axios"
const { Column } = Table;

const App = () => {
  const [data,setData]=useState([])
  const [total,settotal]=useState(0)
  const [current,setCurrent]=useState(1)
  const http=async(pageIndex=0,pageSize=5)=>{
    const res=await axios.get('/list',{
      params:{
        pageIndex,pageSize
      }
    })
    setData(res.data.data)
    settotal(res.data.total)
    console.log(res)
  }
  useEffect(()=>{
    http()
  },[])
  const onChange = page => {
    console.log(page);
    setCurrent(page)
    http(page)
  };
  return (
    <div className='listWarp'>
      <Table dataSource={data} rowKey={data.id} pagination={false}>
        <Column  title="标题" dataIndex="title"  />
        <Column title="描述" dataIndex="detail"  />
        <Column title="价格" dataIndex="price"  />
        <Column
          title="操作"
          key="action"
          render={() => (
            <Space size="middle">
              <a>编辑</a>
              <a>删除</a>
            </Space>
          )}
        />
      </Table>
      <Pagination current={current} onChange={(page)=>onChange(page)} total={total}/>
    </div>
  );
}

export default App;
